<style lang="scss" scoped>

  .nav-wrap{
    width: 80px; height: 100%;
    overflow: hidden;
  }
  .nav-left{
    width: 100px; height: 100%;
    background: #303641;
    overflow: auto;
  }

  .head{
    display: block;
    width: 50px; height: 50px;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 50px;
    transform: translateX(-2px);
  }

  .nav-item{
    cursor: pointer;
    position: relative;
    transform: translateX(-2px);
    height: 58px;
    margin-bottom: 43px;
    &>img{
      width: 30px; height: 30px;
      margin: 0 auto;
      margin-bottom: 11px;
    }
    &>div{
      text-align: center;
      font-size: 12px;
      color: #FFFFFF;
    }
    &> .active{
      color: #39B866;
    }
  }

  .dash-line{
    width: 100%; height: 1px;
    background: #fff;
    opacity: .1;
    margin-bottom: 43px;
  }

  .bottom-icon{
    display: block;
    width: 20px; height: 20px;
    margin: 100px auto;
  }

  .m-mt-30{
    margin-top: 30px;
  }
</style>
<template>
<div class="nav-wrap">
  <div class="nav-left">
    <img :src="userInfo.usericon" class="head"/>
    <template v-if="suit('outframe')">
      <div class="nav-item" style="margin-top:88px;" v-if="nav == '/outborder'" @click="routerTo('/outborder')">
        <img src="../../../static/img/navigation_outFrame_select.png" class="">
        <div>外框</div>
      </div>
      <div class="nav-item" style="margin-top:88px;" v-else @click="routerTo('/outborder')">
        <img src="../../../static/img/navigation_outFrame.png" class="">
        <div>外框</div>
      </div>
    </template>


    <template v-if="suit('inframe')">
      <div class="nav-item" v-if="nav == '/outborder2'" @click="routerTo('/outborder2')">
        <img src="../../../static/img/navigation_innerFrame_select.png" class="">
        <div>内框</div>
      </div>
      <div class="nav-item" v-else @click="routerTo('/outborder2')">
        <img src="../../../static/img/navigation_innerFrame.png" class="">
        <div>内框</div>
      </div>
    </template>

    <template v-if="suit('outmatcard')">
      <div class="nav-item" v-if="nav == '/outCard'" @click="routerTo('/outCard')">
        <img src="../../../static/img/navigation_outMat_select.png" class="">
        <div>外衬卡纸</div>
      </div>
      <div class="nav-item" v-else @click="routerTo('/outCard')">
        <img src="../../../static/img/navigation_outMat.png" class="">
        <div>外衬卡纸</div>
      </div>
    </template>

    <template v-if="suit('middlematcard')">
      <div class="nav-item" v-if="nav == '/centerCard'" @click="routerTo('/centerCard')">
        <img src="../../../static/img/navigation_middleMat_select.png" class="">
        <div>中衬卡纸</div>
      </div>
      <div class="nav-item" v-else @click="routerTo('/centerCard')">
        <img src="../../../static/img/navigation_middleMat.png" class="">
        <div>中衬卡纸</div>
      </div>
    </template>

    <template v-if="suit('inmatcard')">
      <div class="nav-item" v-if="nav == '/innerCard'" @click="routerTo('/innerCard')">
        <img src="../../../static/img/navigation_innerMat_select.png" class="">
        <div>内衬卡纸</div>
      </div>
      <div class="nav-item" v-else @click="routerTo('/innerCard')">
        <img src="../../../static/img/navigation_innerMat.png" class="">
        <div>内衬卡纸</div>
      </div>
    </template>

    <div class="dash-line"></div>

    <template v-if="suit('submanager')">
      <div class="nav-item" v-if="nav == '/manager'">
        <img src="../../../static/img/navigation_admin_select.png">
        <div class="active">子管理员</div>
      </div>
      <div class="nav-item" v-else @click="routerTo('/manager')">
        <img src="../../../static/img/navigation_admin.png">
        <div>子管理员</div>
      </div>
    </template>


    <template v-if="suit('agent')">
      <div class="nav-item" v-if="nav == '/wxmanager'">
        <img src="../../../static/img/navigation_proxy_select.png">
        <div class="active">微代理</div>
      </div>
      <div class="nav-item" v-else @click="routerTo('/wxmanager')">
        <img src="../../../static/img/navigation_proxy.png">
        <div>微代理</div>
      </div>
    </template>

    <template>
      <div class="nav-item" v-if="nav == 1">
        <img src="../../../static/img/navigation_Member_select.png">
        <div class="active">订单</div>
      </div>
      <div class="nav-item" v-else @click="routerTo('/manager')">
        <img src="../../../static/img/navigation_Member.png">
        <div>订单</div>
      </div>
    </template>

    <div class="dash-line"></div>

    <template>
      <div class="nav-item" v-if="nav == '/member'">
        <img src="../../../static/img/navigation_Member_select.png">
        <div class="active">会员中心</div>
      </div>

      <div class="nav-item" v-else @click="routerTo('/member')">
        <img src="../../../static/img/navigation_Member.png">
        <div>会员中心</div>
      </div>
    </template>

    <img class="bottom-icon"/>

  </div>
</div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {

      }
    },
    computed:{
      ...mapState({
          userInfo: state => state.login.userInfo
      }),

    },
    methods: {
      routerTo (path) {
        console.log(path)
        this.$router.push(path)
      },
      suit(type){
        return this.userInfo.auth.indexOf(type) >= 0 || this.userInfo.type === 'shopowner'
      }
    },
    props:['nav'],

  }
</script>

